<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>新建比赛</title>
<link href="/match/css/login/mui.min.css" rel="stylesheet" />
<link href="/match/css/matchDetail/app.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/match/css/match/mui.picker.min.css" />
<script src="/match/libs/mui/mui.min.js"></script>
<script src="/match/libs/mui/mui.picker.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">创建新比赛</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">

				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>比赛名称<font color="red">*</font></label>
						<input id="matchName" type="text" class="mui-input" placeholder="请输入比赛名称">
					</div>
					<div class="mui-input-row">
						
					<a  class="mui-navigate-right" style="font-family: 'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;padding: 11px 15px;color:black;">
		                  <label>比赛类型<font color="red">*</font></label>
						<span  id="matchType" style="right:35px;position: absolute;top:25%;">小组+淘汰赛</span>
						</a>
					</div>
					<div class="mui-input-row">
					<a class="mui-navigate-right" style="font-family: 'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;padding: 11px 15px;color:black;">
						<label>开始时间</label>
						</a>
						<span class="date" id="startTime" style="right:35px;position: absolute;top:25%;">请选择开始时间</span>
					</div>
					<div class="mui-input-row ">
						<a class="mui-navigate-right" style="font-family: 'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;padding: 11px 15px;color:black;">
		                   <label>结束时间</label>
						<span class="date" id="endTime" style="right:35px;position: absolute;top:25%;">请选择结束时间</span>
						
		                </a>
					</div>
					
					<div class="mui-input-row">
						<label>比赛地点</label>
						<input id="address" type="text" class="mui-input" placeholder="请输入比赛地点">
					</div>
					<div class="mui-input-row">
						<label>主办方</label>
						<input id="holder" type="text" class="mui-input" placeholder="请输入主办方名称">
					</div>
					<div class="mui-input-row">
						<label>承办方</label>
						<input id="operator" type="text" class="mui-input" placeholder="请输入承办方名称">
					</div>
					
					<div class="mui-button-row" style="margin: 10px 5px;">
						<button id="createbutton" type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" onclick="return false;">返回</button>
					</div>
				</form>
				
			</div>
		</div>
				<script type="text/javascript">
				(function($) {
					$.init();
					//var result = $('#result')[0];
					var btns = $('.date');
					var matchType="03"
					btns.each(function(i, btn) {
						btn.addEventListener('tap', function() {
							var _self = this;
							if(_self.picker) {
								_self.picker.show(function (rs) {
									//result.innerText =  rs.text;
									_self.picker.dispose();
									_self.picker = null;
								});
							} else {
								var optionsJson = this.getAttribute('data-options') || '{}';
								var options = JSON.parse(optionsJson);
								var id = this.getAttribute('id');
								
								/*
								 * 首次显示时实例化组件
								 * 示例为了简洁，将 options 放在了按钮的 dom 上
								 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
								 */
								_self.picker = new $.DtPicker(options);
								_self.picker.show(function(rs) {
									/*
									 * rs.value 拼合后的 value
									 * rs.text 拼合后的 text
									 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
									 * rs.m 月，用法同年
									 * rs.d 日，用法同年
									 * rs.h 时，用法同年
									 * rs.i 分（minutes 的第二个字母），用法同年
									 */
									 
									$("#"+id)[0].innerText =  rs.text;
									/* 
									 * 返回 false 可以阻止选择框的关闭
									 * return false;
									 */
									/*
									 * 释放组件资源，释放后将将不能再操作组件
									 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
									 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
									 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
									 */
									_self.picker.dispose();
									_self.picker = null;
								});
							}
							
						}, false);
					});
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '03',
						text: '小组赛+淘汰赛'
					}, {
						value: '02',
						text: '小组赛'
					}, {
						value: '01',
						text: '淘汰赛'
					}, {
						value: '04',
						text: '五羽伦比'
					}, {
						value: '05',
						text: '等级排位赛'
					}, {
						value: '06',
						text: '北斗七星段位赛'
					}, {
						value: '07',
						text: '队队碰'
					}]);
					var showUserPickerButton = $('#matchType')[0];
					var userResult = $('#matchType')[0];
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = items[0].text;
							matchType = items[0].value;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					$('#createbutton')[0].addEventListener('tap', function() {
				            fGetData();
				        }); 

				           
				        function fGetData() { //请求数据
				            var matchName = $('#matchName')[0].value;				            
				            var startTime = $('#startTime')[0].innerText;
				            if(startTime.length != 16){
				            	startTime="";
				            }
				            var endTime = $('#endTime')[0].innerText;
				            if(endTime.length != 16){
				            	endTime="";
				            }
				            var address = $('#address')[0].value;
				            var holder = $('#holder')[0].value;
				            var operator = $('#operator')[0].value;
				            mui.ajax({
				                type: "post",
				                url: "/match/match/matchCreate",
				                async: true,
				                data: {
				                	matchName: matchName,
				                	matchType: matchType,
				                	startTime: startTime,
				                	endTime: endTime,
				                	address: address,
				                	holder: holder,
				                	operator: operator
				                },
				                dataType: "json",				               
				                timeout: 10000,
				                success: function(data) {				                    
				                    if(data.status == "success"){
					                	   window.location="/match/match/matchDetailPage";
					                   }else{
					                	   alert(data.message);
					                   }
				                },
				                error: function(xhr, type, errorThrown) {
				                	if(type == "timeout"){
				                		alert("请求超时了");
				                	}
				                    
				                }
				            });
				        } 
				})(mui);
		</script>
</body>
</html>